<template>
  <div>
    <el-dialog
      title="设置跳转"
      v-if="navShow"
      append-to-body
      :visible.sync="navShow"
      :close-on-click-modal="false"
      width="80%"
      :before-close="beforeClose"
    >
      <avue-form v-model="navForm" :option="navOption" @submit="navSubmit">
        <template slot="content" slot-scope="scope">
          <wang-editor :html="navForm.content" @editorval="editorval" />
        </template>
      </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList as goodslista,
  getDetail as goodsDetial,
} from "@/api/shop/goods";
export default {
  props: ["navForm"],
  data() {
    return {
      navShow: true,
      navOption: {
        column: [
          {
            label: "导向类型",
            prop: "urlType",
            type: "select",
            value: 1,
            span: 24,
            dicData: [
              {
                label: "无导向",
                value: 1,
              },
              {
                label: "导向小程序",
                value: 2,
              },
              {
                label: "导向内容详情",
                value: 3,
              },
              {
                label: "导向内部界面",
                value: 4,
              },
              {
                label: "导向外部页面",
                value: 5,
              },
              // {
              //   label: "导向视频号",
              //   value: 7,
              // },
              // {
              //   label: "导向视频号直播间",
              //   value: 8,
              // },
            ],
            control: (val, form) => {
              console.log(val, form);
              if (val == 1) {
                form.path = "";
                return {
                  miniappid: {
                    display: false,
                  },
                  minipath: {
                    display: false,
                  },
                  content: {
                    display: false,
                  },
                  path: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                };
              } else if (val == 2) {
                form.path = "";
                return {
                  miniappid: {
                    display: true,
                  },
                  minipath: {
                    display: true,
                  },
                  content: {
                    display: false,
                  },
                  path: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                  url: {
                    display: false,
                  },
                };
              } else if (val == 3) {
                form.path = "";
                return {
                  miniappid: {
                    display: false,
                  },
                  minipath: {
                    display: false,
                  },
                  content: {
                    display: true,
                  },
                  path: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                  url: {
                    display: false,
                  },
                };
              } else if (val == 4) {
                return {
                  miniappid: {
                    display: false,
                  },
                  minipath: {
                    display: false,
                  },
                  content: {
                    display: false,
                  },
                  path: {
                    display: true,
                  },
                  params: {
                    display: true,
                  },
                  url: {
                    display: false,
                  },
                };
              } else if (val == 5) {
                form.path = "";
                return {
                  miniappid: {
                    display: false,
                  },
                  minipath: {
                    display: false,
                  },
                  content: {
                    display: false,
                  },
                  path: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                  url: {
                    display: true,
                  },
                };
              } else {
                form.path = "";
                return {
                  miniappid: {
                    display: false,
                  },
                  minipath: {
                    display: false,
                  },
                  content: {
                    display: false,
                  },
                  path: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                  url: {
                    display: false,
                  },
                };
              }
            },
            rules: [
              {
                required: true,
                message: "请选择导向类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "小程序APPID",
            prop: "miniappid",
            display: false,
            labelWidth: 120,
            rules: [
              {
                required: true,
                message: "请输入小程序APPID",
                trigger: "blur",
              },
            ],
          },
          {
            label: "小程序路径",
            prop: "minipath",
            display: false,
            labelWidth: 110,
            rules: [
              {
                required: true,
                message: "请输入小程序路径",
                trigger: "blur",
              },
            ],
          },
          {
            label: "内容详情",
            prop: "content",
            span: 24,
            slotform: true,
            display: false,
          },
          {
            label: "内部链接",
            prop: "path",
            display: false,
            type: "select",
            dicData: [
              {
                label: "首页",
                value: "/pages/index/index",
              },
              {
                label: "全部商品/搜索界面",
                value: "/pages/allGoodsList/allGoodsList",
              },
              {
                label: "商品分组",
                value: "/pages/allGoodsList/allGoodsList?id=",
              },
              {
                label: "商品详情",
                value: "/pages/goodsDetail/goodsDetail?id=",
              },
              {
                label: "全部分类",
                value: "/pages/cate/cate",
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择内部链接",
                trigger: "blur",
              },
            ],
            control: (val, form) => {
              if (val == "/pages/goodsDetail/goodsDetail?id=") {
                return {
                  goodsid: {
                    display: true,
                  },
                  cateid: {
                    display: false,
                  },
                  params: {
                    display: false,
                  },
                };
              } else if (val == "/pages/allGoodsList/allGoodsList?id=") {
                return {
                  goodsid: {
                    display: false,
                  },
                  cateid: {
                    display: true,
                  },
                  params: {
                    display: false,
                  },
                };
              } else {
                return {
                  goodsid: {
                    display: false,
                  },
                  cateid: {
                    display: false,
                  },
                };
              }
            },
          },
          {
            label: "绑定商品",
            prop: "goodsid",
            type: "table",
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择商品",
                trigger: "blur",
              },
            ],
            children: {
              border: true,
              column: [
                {
                  label: "商品ID",
                  prop: "id",
                  search: false,
                  searchSpan: 6,
                  width: 200,
                },
                {
                  label: "商品图",
                  prop: "img",
                  align: "center",
                  type: "upload",
                  width: 100,
                  listType: "picture-img",
                  display: false,
                },
                {
                  label: "商品名称",
                  search: true,
                  searchSpan: 6,
                  prop: "name",
                },
              ],
            },
            formatter: (row) => {
              if (row == undefined || !row.name) {
              } else {
                return row.name + "-" + row.id;
              }
            },
            onLoad: ({ page, value, data }, callback) => {
              //首次加载去查询对应的值
              if (value) {
                console.log(value);
                //this.$message.success('首次查询' + value)
                goodsDetial(value).then((res) => {
                  callback(res.data.data);
                });
                return;
              }
              if (data) {
                console.log(data);
              }
              if (page) {
                console.log(page);
              }
              //分页查询信息
              goodslista(page.currentPage, page.pageSize, {
                ...data,
                status: 1,
              }).then((res) => {
                callback({
                  total: res.data.data.total,
                  data: res.data.data.records,
                });
              });
            },
            props: {
              label: "name",
              value: "id",
            },
          },
          {
            label: "商品分组",
            prop: "cateid",
            type: "cascader",
            dicUrl: "/api/server-shop/admin/goods/category/tree",
            props: {
              label: "title",
              value: "id",
            },
            dataType: "string",
            checkStrictly: true,
            display: false,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请选择商品分组",
                trigger: "blur",
              },
            ],
          },
          {
            label: "跳转参数",
            prop: "params",
            display: false,
          },
          {
            label: "外部页面",
            prop: "url",
            span: 24,
            display: false,
            rules: [
              {
                required: true,
                message: "请输入外部页面",
                trigger: "blur",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    editorval(val) {
      this.navForm.content = val;
    },
    navSubmit(form, done) {
      this.$emit("navSubmit", form);
    },
    beforeClose() {
      this.$emit("beforeClose");
    },
  },
};
</script>
